<section class="content-section-column">
  <div class="ui-card-box">
    <lv-card style="width: 530px" lvHoverable lvTitle="Card title" [lvExtra]="extraTpl" (click)="goto()">
      <p>
        Basing on the status and activity during last 7 days, several volumes in the pool (Storagepool_multimedia_shenzhen) are potentially
        reclaimable. several volumes in the pool are potentially reclaimable.
      </p>
    </lv-card>
  </div>

  <lv-card style="width: 530px" lvHoverable lvType="border" lvTitle="Card title" [lvExtra]="extraTpl" (click)="goto()">
    <p>
      Basing on the status and activity during last 7 days, several volumes in the pool (Storagepool_multimedia_shenzhen) are potentially
      reclaimable. several volumes in the pool are potentially reclaimable.
    </p>
  </lv-card>

  <lv-card style="width: 530px" lvHoverable lvType="shadow" lvTitle="Card title" [lvExtra]="extraTpl" (click)="goto()">
    <p>
      Basing on the status and activity during last 7 days, several volumes in the pool (Storagepool_multimedia_shenzhen) are potentially
      reclaimable. several volumes in the pool are potentially reclaimable.
    </p>
  </lv-card>
</section>

<ng-template #extraTpl>
  <i lv-icon="lv-icon-more" lvColorState class="ui-card-extra"></i>
</ng-template>
